<template>
	<div class="container">
		<div class="page-body">
			<div class="page-main" v-if="!isList">
				<!--搜索条件框-->
				<div class="page-condition">
					<a-form layout="inline" :form="form" @submit="handleSubmit">
						<div class="page-header">
							<span class="title-item">指令收发</span>
						</div>
						<a-row>
							<a-col :offset="1">
								<a-form-item label="发件人" labelAlign="right">
									<a-select class="watch-address">
									</a-select>
								</a-form-item>
								<a-form-item label="时间段" labelAlign="right">
									<a-date-picker v-model="startValue" :disabled-date="disabledStartDate" show-time format="YYYY-MM-DD HH:mm:ss"
									 @openChange="handleStartOpenChange" />
									<span class="block-text">-</span>
									<a-date-picker v-model="endValue" :disabled-date="disabledEndDate" show-time format="YYYY-MM-DD HH:mm:ss"
									 :open="endOpen" @openChange="handleEndOpenChange" />
								</a-form-item>
								<a-button class="select-btn" style="margin-top: 4px;color:black;width: 100px; font-weight: 500;">查询</a-button>
								<div class="download-btn">
									<a href="javascript:;" style="color:#207064"><a-icon type="cloud-download" /> 导出数据</a>
								</div>
							</a-col>
						</a-row>
					</a-form>
				</div>
				<!--表格列表-->
				<div class="table-list-box">
					<!--列表-->
					<div class="list-body">
						<!--列表头部-->
						<div class="list-tr list-tr-header">
							<div class="thead-item">
								序号
							</div>
							<div class="thead-item">
								发件人
							</div>
							<div class="thead-item">
								部门
							</div>
							<div class="thead-item" >
								主题
							</div>
							<div class="thead-item" style="margin-left: 600px;">
								时间
							</div>
							<div class="thead-item">
								操作
							</div>
						</div>
						<div class="list-tr" v-for="(item,index) in dataList" :key="index">
							<div class="thead-item">
								{{index+1}}
							</div>
							<div class="thead-item"><a-icon type="mail" />
								{{item.company}}
							</div>
							<div class="thead-item">
								{{item.oxygen}}
							</div>
							<div class="thead-item" style="width: 750px;overflow: hidden;">
								<span>
									{{item.signtime}}
								</span>
								<span>
									{{item.carbondioxide}}
								</span>

							</div>
							<div class="thead-item">
								{{item.outtime}}
							</div>
							<div class="thead-item">
								<a href="javascript:;" style="color: #367F72;">指令详情</a>
								<a-button style="background-color: #2C6A5F;border: none;margin-left: 8px;" @click="showCont">回复</a-button>
							</div>
						</div>
					</div>
				</div>
				<div class="table-page-box" offset="1" style="margin-top: 50px;">
					<a-pagination  :default-current="3" :total="500" :show-total="total => `共 ${total} 条记录`" :item-render="itemRender" @showSizeChange="onShowSizeChange" />
				</div>

			</div>
			<div v-show="show">
				<div class="page-condition">
					<a-form layout="inline" :form="form" @submit="handleSubmit">
						<div class="page-header">
							<span class="title-item" >指令回复</span>
						</div>
					</a-form>
					<div>
						<a-row>
							<a-col :span="10" :offset="1" style="display: flex;">
								<a-form-item class="form-item" label="指令标题" labelAlign="right">
								</a-form-item>
								<span style="color: #bebebe; font-size: 24px;">xxxxxxxxx</span>
							</a-col>
							<a-col :span="6" :offset="4" style="display: flex;">
								<a-form-item class="form-item" label="发件人" labelAlign="right">
								</a-form-item>
								<span style="color: #bebebe; font-size: 24px;">xxxxxxxxx</span>
							</a-col>
						</a-row>	
						<a-row>
							<a-col :span="6" :offset="1" style="display: flex;">
								<a-form-item class="form-item" label="指令内容" labelAlign="right">
								</a-form-item>
								<span style="color: #bebebe; font-size: 24px;">xxxxxxxxx</span>
							</a-col>
						</a-row>	
						<a-row>
							<a-col :span="17" :offset="1" style="display: flex;">
								<a-form-item class="form-item" label="备注" labelAlign="right">
								</a-form-item>
								<a-textarea :rows="9" placeholder="xxxxxxxxx" style="font-size: 24px;"/>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="18" :offset="1">
								<a-button class="reply-btn"  @click="showCont">回复</a-button>
							</a-col>
						</a-row>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import 'moment/locale/zh-cn';
	export default {
		name: "index",
		data() {
			return {
				form: this.$form.createForm(this, {
					name: 'horizontal_login'
				}),
				moment,
				isList: false,
				show: false,
				startValue: null,
				endValue: null,
				endOpen: false,
				pageSize: 20,
				current: 4,
				dataList: [{
						id: 1,
						company: "张三",
						oxygen: "XXXXXXXXX",
						signtime: " XXXXXXXX",
						carbondioxide: "部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文",
						outtime: "xxxxxxxx",
					},
					{
						id: 1,
						company: "张三",
						oxygen: "XXXXXXXXX",
						signtime: " XXXXXXXX",
						carbondioxide: "部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文",
						outtime: "xxxxxxxx",
					},
					
				
					
				]
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.form.validateFields();
			});
		},
		watch: {
			startValue(val) {
				console.log('startValue', val);
			},
			endValue(val) {
				console.log('endValue', val);
			},
			pageSize(val) {
				console.log('pageSize', val);
			},
			current(val) {
				console.log('current', val);
			}
		},
		methods: {
			/* 分页 */
			itemRender(current, type, originalElement) {
				if (type === 'prev') {
					return <a>上一页</a>;
				} else if (type === 'next') {
					return <a>下一页</a>;
				}
				return originalElement;
			},
			onShowSizeChange(current, pageSize) {
				console.log(current, pageSize);
			},
			disabledStartDate(startValue) {
				const endValue = this.endValue;
				if (!startValue || !endValue) {
					return false;
				}
				return startValue.valueOf() > endValue.valueOf();
			},
			disabledEndDate(endValue) {
				const startValue = this.startValue;
				if (!endValue || !startValue) {
					return false;
				}
				return startValue.valueOf() >= endValue.valueOf();
			},
			handleStartOpenChange(open) {
				if (!open) {
					this.endOpen = true;
				}
			},
			handleEndOpenChange(open) {
				this.endOpen = open;
			},
			handleSubmit() {

			},
			onCheckboxChange(e) {
				console.log('current', e);
			},
			showCont: function() {
				this.show = !this.show;
				this.isList = !this.isList;
			},

		}
	}
</script>
<style>
/* 分页统计数据字体颜色 */
.ant-pagination-total-text {
	color: rgba(255, 255, 255, 0.65);
	font-size: 21px;
}
/* Form表单label */
.ant-form-item-label > label::after {
	content: '';
}
</style>
<style scoped>
.reply-btn {
	float: right;
	margin-top: 5px;
	margin-right: 66px;
	background-color: #2c6a5f;
	border: none;
	font-weight: 700;
	width: 95px;
}
</style>
<style scoped src="../../../../assets/style/pollution.css"></style>
<style scoped lang="scss">
	::v-deep .container {
		margin-top: 11px;
	}

	::v-deep .page-header {
		margin-left: 25px;
		margin-top: 30px;
	}

	::v-deep .title-item {
		font-size: 24px;
		color: #37ddc0;
		width: 100%;
	}

	::v-deep .ant-form-item-control {
		display: inline-block;
	}

	::v-deep .ant-form-item-label label {
		color: #9fb043;
		font-size: 18px;
	}

	::v-deep .ant-form-item-control-wrapper,
	::v-deep .ant-form-item {
		width: auto;
	}

	::v-deep .ant-form-inline .ant-form-item {
		margin-top: 0px;
	}

	::v-deep .ant-pagination-item,
	::v-deep .ant-select-selection {
		background-color: #1e3230;
		border: none;
	}

	::v-deep .ant-pagination-item a,
	::v-deep .ant-select-arrow,
	::v-deep .ant-select-selection__rendered {
		color: #bebebe;
	}

	::v-deep .ant-pagination-prev .ant-pagination-item-link,
	::v-deep .ant-pagination-next .ant-pagination-item-link {
		background-color: #1e3230;
		border: none;
		color: #bebebe;
	}
</style>

